<template>
  <div>
    <div style="margin-bottom: 13px;">
      <i style="font-size: 30px;color: #34bfa3;line-height: 40px">{{ surplusText }}</i>
      <i v-if="batteryCharging" style="margin:0 18px;color: #03c2c2;font-size: 20px" :class="{'infinite':batteryCharging}">充电中<i class="fa fa-bolt" style="font-size: 20px;margin-left: 13px" /></i>
    </div>
    <div style="display: flex;">
      <div>
        <div class="battery-icon">
          <div v-for="index in 5" :key="index" :class="['battery-icon-item',{'battery-icon-item-blue':(index <= batterySurplus / 20)}]" />
        </div>
        <div style="margin-top: 13px;text-align: center;color: #909399;">
          <i v-if="isOutput" class="blue">{{ $t('discharge') }}</i>
          <i v-else="">{{ $t('noDischarge') }}</i>
        </div>
      </div>
      <div style="margin-left: 13px">
        <div style="display: flex">
          <i class="fa fa-thermometer-empty" style="font-size: 35px;color: #909399;" />
          <div style="margin-left: 5px;color: #909399;">
            <span style="margin: 0 2px">{{ batteryTemplate }} ℃</span>
            <div>
              <i>{{ $t('workTemplate') }}：{{ lowProtectTemplate }} ℃ ~ {{ highProtectTemplate }} ℃</i>
            </div>
          </div>
        </div>
        <div style="margin-top: 13px" />
        <div v-if="batteryType" class="info-item">
          <span class="title">{{ $t('batteryType') }}:</span>
          <span class="value">{{ batteryType }}</span>
        </div>
        <div v-if="batteryType" class="info-item">
          <span class="title">{{ $t('batteryCapacity') }}:</span>
          <span class="value">{{ batteryCapacity }} Ah</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('chargingVoltage') }}:</span>
          <span class="value">{{ computedChargingVoltage }} V</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('chargingCurrent') }}:</span>
          <span class="value">{{ computedChargingCurrent }} A</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('input')+$t('power') }}:</span>
          <span class="value">{{ computedInputPower }} W</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('batteryVoltage') }}:</span>
          <span class="value">{{ computedBatteryVoltage }} V</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('outputCurrent') }}:</span>
          <span class="value">{{ computedOutputCurrent }} A</span>
        </div>
        <div class="info-item">
          <span class="title">{{ $t('output')+$t('power') }}:</span>
          <span class="value">{{ computedOutputPower }} W</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SolarBattery',
  props: {
    batteryTemplate: {
      type: String,
      default: '_'
    },
    batterySurplus: {
      type: Number,
      default: 60
    },
    batteryCharging: {
      type: Boolean,
      default: false
    },
    batteryType: {
      type: String,
      default: ''
    },
    chargingVoltage: {
      type: String,
      default: ''
    },
    batteryVoltage: {
      type: String,
      default: ''
    },
    chargingCurrent: {
      type: String,
      default: ''
    },
    outputCurrent: {
      type: String,
      default: ''
    },
    highProtectTemplate: {
      type: String,
      default: ''
    },
    lowProtectTemplate: {
      type: String,
      default: ''
    },
    batteryCapacity: {
      type: String,
      default: ''
    },
    deviceCore: {
      type: String,
      default: ''
    }
  }, data() {
    return {
      surplusText: null,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  computed: {
    isOutput() {
      return this.outputCurrent > 50
    },
    computedChargingVoltage() {
      return this.chargingVoltage / 1000
    },
    computedChargingCurrent() {
      return this.chargingCurrent / 1000
    },
    computedOutputPower() {
      return (this.batteryVoltage * this.outputCurrent / 1000000).toFixed(2)
    },
    computedInputPower() {
      return (this.chargingVoltage * this.chargingCurrent / 1000000).toFixed(2)
    },
    computedOutputCurrent() {
      return this.outputCurrent / 1000
    },
    computedBatteryVoltage() {
      return this.batteryVoltage / 1000
    }
  },

  watch: {
    batterySurplus: {
      deep: true,
      handler(val) {
        const batterySurplus = parseInt(this.batterySurplus)
        if (this.batteryCharging) {
          this.surplusText = batterySurplus + '%'
        } else {
          this.surplusText = batterySurplus + '%'
        }
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  i{
    font-size: 7px;
  }

  .blue{
    color: #03c2c2;
  }
  @import '@/styles/element-variables.scss';

  .battery-icon-item {
    margin: 2px 5px;
    flex-grow: 1
  }

  .battery-icon-item-blue{
    /*border-style: solid;*/
    /*border-width: 1px;*/
    background: #03c2c2;
  }

  .battery-icon {
    height: 200px;
    width: 64px;
    border-radius: 3px;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: 0 5px 12px 0 rgba(0,0,0,.4);
  }

  .battery-icon:after{
    content: "";
    width: 42px;
    position: absolute;
    top:-5px;
    right: 10px;
    background: #606266;
    height: 5px;
  }

  .info-item{
    margin-top: 6px;
    font-size: 7px;
  }
  .title{
    color: #909399;
  }
  .value{
    margin-left: 5px;
    color: #34bfa3;
  }
</style>
